
/**
 * 初始值
 */

var divBorder = 2; // 裁剪区边框
var cutAreaWidth = 150; // 裁剪区宽
var cutAreaHeight = 100;// 裁剪区高
var ZHLCutConWidth = 500;  // 容器初始宽
var ZHLCutConHeight = 500; // 容器初始高
addZHLCutTool(); // 初始html元素
var ZHLCutE = document.getElementById('ZHLCutE');
ZHLCutE.style.border = divBorder+'px dashed #111';
ZHLCutE.style.width = cutAreaWidth+'px';
ZHLCutE.style.height = cutAreaHeight+'px';
var ZHLCutCon = document.getElementById('ZHLCutCon');
ZHLCutCon.style.width = ZHLCutConWidth+'px';
ZHLCutCon.style.height = ZHLCutConHeight+'px';

// 点击显示裁剪控件
var imgCutInputBoxIndex = '';
var imgCutInputBoxs = document.getElementsByClassName('imgCutInputBox');
for(var i=0;i<imgCutInputBoxs.length;i++){
	imgCutInputBoxs[i].setAttribute("index",i);
	imgCutInputBoxs[i].onclick=function(){
		imgCutInputBoxIndex = this.getAttribute("index");
		document.getElementById("ZHLCutBox").style.display = 'block'; // 控件
		document.getElementById("ZHLCutBoxMask").style.display = 'block'; // 遮罩
		// 初始值
		// input 元素class为imgCutInputBox
		cutAreaWidth = this.getAttribute("cut_w"); // 裁剪区宽
		cutAreaHeight = this.getAttribute("cut_h");// 裁剪区高
		//var cutSubUrl = 'upload.php';
		var ZHLCutE = document.getElementById('ZHLCutE');
		ZHLCutE.style.border = divBorder+'px dashed #111';
		ZHLCutE.style.width = cutAreaWidth+'px';
		ZHLCutE.style.height = cutAreaHeight+'px';
		// 页面滑动到空间位置
		document.body.scrollTop = 0;
		document.documentElement.scrollTop = 0;
	}
}

/**
 * 添加控件html基本元素
 */
function addZHLCutTool(){
	var ZHLCutBox = document.getElementById("ZHLCutBox");
	if(!ZHLCutBox){
		let ZHLCutBox = document.createElement("div");
		//裁剪控件
		let html = '<style>' +
			'#ZHLCutBox button{margin:10px;margin:10px;background: #ddd; padding: 3px 5px; border-radius: 3px;color:#333;}\n' +
			'#ZHLCutCon,#ZHLCutSee{margin:0 10px 10px 10px;}\n' +
			'#ZHLCutCon{min-width:500px;min-height:500px;max-width:100%;max-height:100%;border:1px solid #ccc;position:relative;}\n' +
			'#ZHLCutDeImg{position:absolute;z-index:1;user-select: none;display:none;}\n' +
			'#ZHLCutE{position:absolute;z-index:3;background:#fff;opacity:0.4;user-select: none;}\n' +
			'#ZHLCutBoxMask{position:fixed;width:100%;height:100%;top:0;left:0;background:#333;opacity:0.5;z-index:100;display:none;}\n' +
			'#ZHLCutBox{display:none;padding:0 0 10px 0;position:absolute;top:0;left:0;border:1px solid #ccc;background:#fff;z-index:101;}\n'+
			'</style>';
		html += '<div id="ZHLCutBoxMask"></div>';
		html += '<div id="ZHLCutBox">';
		html += '<input type="file" id="ZHLCutSelect" hidefocus style="display:none">';
		html += '<button onclick="ZHLCutSelect.click()">选择文件</button>';
		html += '<button id="ZHLCutGo">裁剪</button>';
		html += '<button id="ZHLCutSub">上传</button>';
		html += '<button id="ZHLCupCloseBtn">关闭</button>';
		html += '<div id="ZHLCutSee"></div>';
		html += '<div id="ZHLCutCon">';
		html += '<img src="" id="ZHLCutDeImg" />';
		html += '<div id="ZHLCutE"></div>';
		html += '</div>';
		html += '</div>';
		document.body.appendChild(ZHLCutBox);
		ZHLCutBox.innerHTML = html;
	}
}

/**
 * 拖动DIV
 */
	//获取元素
	//var ZHLCutE = document.getElementById('ZHLCutE');
var x = 0;
var y = 0;
var l = 0;
var t = 0;
var nl = 0;
var nt = 0;
var isDown = false;

//鼠标按下事件
ZHLCutE.onmousedown = function(e) {
	//获取x坐标和y坐标
	x = e.clientX;
	y = e.clientY;
	//获取左部和顶部的偏移量
	l = ZHLCutE.offsetLeft;
	t = ZHLCutE.offsetTop;
	//开关打开
	isDown = true;
	//设置样式
	ZHLCutE.style.cursor = 'move';
}
//鼠标移动
window.onmousemove = function(e) {
	if (isDown == false) {
		return;
	}
	//获取x和y
	var nx = e.clientX;
	var ny = e.clientY;
	//计算移动后的左偏移量和顶部的偏移量
	nl = nx - (x - l);
	nt = ny - (y - t);
	//控制最小便宜量（防止裁剪框移出图片区域）
	nl = nl < 0 ? 0 : nl;
	nt = nt < 0 ? 0 : nt;
	//控制最大偏移量（防止裁剪框移出图片区域）
	if(ZHLCutDeImgW > 0 && ZHLCutDeImgH > 0){
		nl = nl > (ZHLCutDeImgW-cutAreaWidth-divBorder) ? ZHLCutDeImgW-cutAreaWidth-divBorder : nl;
		nt = nt > (ZHLCutDeImgH-cutAreaHeight-divBorder) ? ZHLCutDeImgH-cutAreaHeight-divBorder : nt;
	}else{
		nl = nl > (ZHLCutConWidth-cutAreaWidth-divBorder) ? ZHLCutConWidth-cutAreaWidth-divBorder : nl;
		nt = nt > (ZHLCutConHeight-cutAreaHeight-divBorder) ? ZHLCutConHeight-cutAreaHeight-divBorder : nt;
	}
	//div位置移动
	ZHLCutE.style.left = nl + 'px';
	ZHLCutE.style.top = nt + 'px';
}
//鼠标抬起事件
ZHLCutE.onmouseup = function() {
	//开关关闭
	isDown = false;
	ZHLCutE.style.cursor = 'default';
}

/**
 * 选择图片
 */
var ZHLCutDeImgW = 0; // 需要裁剪原始图片的宽
var ZHLCutDeImgH = 0; // 需要裁剪原始图片的高
var ZHLCutSelect = document.getElementById("ZHLCutSelect");
ZHLCutSelect.onchange = function () {
	var file = ZHLCutSelect.files[0];
	//判断文件大小不能超过10M ，免去服务器的压力。
	if (file.size > 10 * 1024 * 1024) {
		alert("上传文件必须 < 10Mb！");
		return false;
	}
	// 获取文件
	var reader = new FileReader();  // 实例化
	reader.readAsDataURL(file);     // 加载
	reader.onload = function () {   // 异步加载完成
		var base64 = reader.result; // 获取 base64 DataURL
		var imgDom = document.getElementById("ZHLCutDeImg");
		imgDom.style.display = 'inline-block';
		imgDom.src = base64;
		var image = new Image();
		image.src = base64;
		image.onload = function () {
			ZHLCutDeImgW = image.naturalWidth;
			ZHLCutDeImgH = image.naturalHeight;
			ZHLCutCon.style.width = ZHLCutDeImgW+'px';
			ZHLCutCon.style.height = ZHLCutDeImgH+'px';
			console.log(ZHLCutDeImgW+'=='+ZHLCutDeImgH);
		}
	}
}

/**
 * 裁剪
 */
var cutNewImgBase64 = ''; // 裁剪后的图片base64全局变量
var ZHLCutGo = document.getElementById('ZHLCutGo');
ZHLCutGo.onclick = function(e){
	var imgDom = document.getElementById("ZHLCutDeImg");
	var canvas = document.createElement('canvas');  // 获取canvas对象
	var context = canvas.getContext('2d');          // 获取canvas的上下文
	canvas.width = cutAreaWidth;
	canvas.height = cutAreaHeight;
	//context.fillStyle = "#0000ff";
	//context.fillRect(0, 0, canvas.width, canvas.height);
	context.clearRect(0, 0, canvas.width, canvas.height); // 首先先清空canvas里面的内容，以防内容叠加
	context.drawImage(imgDom, nl, nt, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height); // 画图
	cutNewImgBase64 = canvas.toDataURL('image/jpeg', 0.92);         // 格式和质量
	document.getElementById('ZHLCutSee').innerHTML = '<img src="'+cutNewImgBase64+'">'; // 裁剪的图片进行浏览
}

/**
 * 上传
 */
// 自封装纯js ajax post 上传方法
function jsPost(url,data,s,e){
	var xhr = new XMLHttpRequest();
	xhr.open('POST',url);
	xhr.onreadystatechange=function(){
		if (xhr.readyState==4){
			if (xhr.status==200 || xhr.status==304){
				s(xhr.responseText);
			}else if(xhr.status>=400){
				e(xhr.responseText);
			}
		}
	}
	xhr.send(data);
}

// 点击提交按钮进行文件上传
var ZHLCutSub = document.getElementById("ZHLCutSub");
ZHLCutSub.onclick = function () {

	let formData = new FormData(); // 实例化创建form表单
	formData.append("base64Data", cutNewImgBase64); // 增加参数（如果进行大文件上传时可以吧base64数据转换成blob）

	/** 测试模拟已经上传成功获得了图片路径了 **/
	//var filepath = './uploads/20210325130617_136.jpeg';
	//filePathVal(filepath); // 赋值

	/** 配合后端接口上传 **/
	let cutSubUrl = http_url+'c_upload_base64cut'+http_fix;
    jsPost(cutSubUrl,formData,function(data){
        console.log('图片裁剪上传请求成功');
        console.log(data);
        //jsonData = JSON.stringify(data);
		var dataRes= $.parseJSON(data);
        //var dataRes = JSON.parse(data);
		//var dataRes = data;
		console.log(dataRes);
        if(dataRes.code == 10000){
            alert('上传成功');
            filePathVal(dataRes.data.imgurl); // 赋值
			///////////////////
			//cms提升体验
			$('.imgCutInputBox').eq(imgCutInputBoxIndex).parents('.sys_e').find('.show_pic').show();
			$('.imgCutInputBox').eq(imgCutInputBoxIndex).parents('.sys_e').find('.del_pic').show();
			$('.imgCutInputBox').eq(imgCutInputBoxIndex).parents('.sys_e').find('.show_pic').attr('data-src',http_url+dataRes.data.imgurl);
        }else{
            alert('上传失败：'+dataRes.msg);
        }
    },function(data){
        console.log('图片裁剪上传请求失败');
        console.log(data);
        alert('上传异常');
    });

	// 上传完毕后这里可以直接关闭裁剪框
	document.getElementById("ZHLCutBox").style.display = 'none';
	document.getElementById("ZHLCutBoxMask").style.display = 'none';
}


/**
 * 扩展
 */


/*
document.getElementById("imgCutInputBox").onclick = function () {
    document.getElementById("ZHLCutBox").style.display = 'block'; // 控件
    document.getElementById("ZHLCutBoxMask").style.display = 'block'; // 遮罩
}
*/
// 图片上传路径赋值
function filePathVal(value){
	imgCutInputBoxs[imgCutInputBoxIndex].value = value;
	$('.imgCutInputBox').eq(imgCutInputBoxIndex).focus(); // 返回到来源位置(获得来源位置焦点)
}
// 点击隐藏裁剪控件
document.getElementById("ZHLCupCloseBtn").onclick = function () {
	document.getElementById("ZHLCutBox").style.display = 'none'; // 控件
	document.getElementById("ZHLCutBoxMask").style.display = 'none'; // 遮罩
	$('.imgCutInputBox').eq(imgCutInputBoxIndex).focus(); // 返回到来源位置(获得来源位置焦点)
}